{% load static %}

<!DOCTYPE html>
<html' lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static './css/global.css' %}">
    <link rel="stylesheet" href="{% static './css/platform.css' %}">
    <title>covid-19_2.0</title>
</head>
<body class="bg">
    <header class="top">
        <ul class="top-nav clearfix">
            <li><a href="/index">首页<br>Home</a></li>
            <li><a href="/prediction">&nbsp;预测系统<br>Prediction</a></li>
            <li><a href="/news">&nbsp;&nbsp;新闻报道<br>News Report</a></li>
            <li><a href="/research">相关研究<br>Research</a></li>
            <li><a href="/prevention">预防措施<br>Prevent</a></li>
            <li><a href="/platform">关于平台<br>Platform</a></li>
            <li><a href="/contact">&nbsp;联系我们<br>Connect us</a></li>
        </ul>
    </header>
    <section>
        <div>
            <div class="left"><img src="{% static 'img/图标1.png' %}" alt=""></div>
            <div class="right">实时疫情预测数据更新</div>
        </div>
        <div>
            <div class="left"><img src="{% static 'img/图标2.png' %}" alt=""></div>
            <div class="right">实时疫情预测数据更新</div>
        </div>
    </section>

    <script charset="utf-8" src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
    <script>/*鼠标滚动导航栏特效无响应，但换成window就可以相应，大概问题就是滚动贴合的时候父容器是father而不是window，但不知道为什么换成father也无响应*/
        window.addEventListener('scroll', function () {
        console.log('1111');
        let top = document.querySelector('.top');
        if (window.scrollY > 0) {
            console.log('2222');
            top.classList.add("bian");
        } else {
            top.classList.remove("bian");
            console.log('3333');
        }
    })
    </script>
</body>
</html>